import React, { useState } from 'react';
import { Button, Input, Table, Form, Space, Pagination, Modal, message } from 'antd';
import { PlusOutlined, DeleteOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { Descriptions } from 'antd';

const mockData = [
  { key: 1, name: 'A1幢1楼展厅', capacity: 30, type: '展厅', code: 'A1-602', area: 5400, price: 520, tag: '设备齐全' },
  { key: 2, name: 'A1幢2楼展厅', capacity: 30, type: '展厅', code: 'A1-502', area: 5200, price: 320, tag: '设备齐全' },
  { key: 3, name: 'A2幢1楼展厅', capacity: 30, type: '展厅', code: 'A1-502', area: 6700, price: 720, tag: '设备齐全' },
  { key: 4, name: 'A2幢2楼展厅', capacity: 30, type: '展厅', code: 'A1-502', area: 6700, price: 400, tag: '设备齐全' },
  { key: 5, name: 'A1幢6楼会议室', capacity: 15, type: '会议室', code: 'A1-502', area: 6200, price: 300, tag: '有投影' },
  { key: 6, name: 'A1幢7楼会议室', capacity: 20, type: '会议室', code: 'A1-502', area: 3000, price: 140, tag: '有黑板' },
  { key: 7, name: 'A2幢1楼展厅', capacity: 30, type: '展厅', code: 'A1-502', area: 4200, price: 3100, tag: '3D全息投影' },
  { key: 8, name: 'A2幢1楼会议室', capacity: 20, type: '会议室', code: 'A1-502', area: 5600, price: 470, tag: '有投影' },
  { key: 9, name: 'F3幢1楼会议室', capacity: 20, type: '会议室', code: 'A1-502', area: 7640, price: 650, tag: '有投影' },
  { key: 10, name: 'D3幢1楼科技展览厅', capacity: 50, type: '展厅', code: 'A1-502', area: 3100, price: 3100, tag: '3D全息投影' },
];

export default function PublicResource() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [data, setData] = useState(mockData);
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const location = useLocation();

  // 详情弹窗状态
  const [detailVisible, setDetailVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState(null);

  React.useEffect(() => {
    if (location.state && location.state.newResource) {
      setData(prevData => [location.state.newResource, ...prevData]);
    }
    // eslint-disable-next-line
  }, [location.state]);

  const columns = [
    { title: '公共资源名称', dataIndex: 'name', align: 'center' },
    { title: '容纳人数', dataIndex: 'capacity', align: 'center' },
    { title: '类型', dataIndex: 'type', align: 'center' },
    { title: '公共资源编号', dataIndex: 'code', align: 'center' },
    { title: '建筑面积（㎡）', dataIndex: 'area', align: 'center' },
    { title: '出租单价（天）', dataIndex: 'price', align: 'center' },
    { title: '标签', dataIndex: 'tag', align: 'center' },
    {
      title: '操作',
      align: 'center',
      render: (_, record) => (
        <Space>
          <Button type="link" onClick={() => { setCurrentRecord(record); setDetailVisible(true); }}>详情</Button>
          <Button type="link" danger onClick={() => handleDelete(record.key)}>删除</Button>
        </Space>
      ),
    },
  ];

  const handleDelete = (key) => {
    Modal.confirm({
      title: '确认删除该公共资源吗？',
      onOk: () => setData(data.filter(item => item.key !== key)),
    });
  };

  const handleBatchDelete = () => {
    if (selectedRowKeys.length === 0) {
      message.warning('请先选择要删除的资源');
      return;
    }
    Modal.confirm({
      title: '确认批量删除所选资源吗？',
      onOk: () => {
        setData(data.filter(item => !selectedRowKeys.includes(item.key)));
        setSelectedRowKeys([]);
      },
    });
  };

  return (
    <div style={{ background: '#fff', minHeight: '100vh', padding: 24 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24 }}>
        <Button type="default" icon={<ArrowLeftOutlined />} onClick={() => navigate('/dashboard/enterprise')} style={{ marginRight: 16 }}>
          返回
        </Button>
        <div style={{ fontWeight: 700, fontSize: 24, borderLeft: '6px solid #4880ff', paddingLeft: 12 }}>
          公共资源管理
        </div>
      </div>
      <div style={{ background: '#fff', borderRadius: 8, border: '1px solid #e5e6eb', padding: 24, marginBottom: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
          <Button type="primary" icon={<PlusOutlined />} style={{ marginRight: 16 }} onClick={() => navigate('/public-resource/create')}>新增</Button>
          <Button style={{ background: '#ffc107', color: '#fff', border: 'none' }} icon={<DeleteOutlined />} onClick={handleBatchDelete}>批量删除</Button>
        </div>
        <Form layout="inline" form={form} style={{ marginBottom: 16 }}>
          <Form.Item label="公共资源名称:" name="name">
            <Input placeholder="请输入公共资源名称" style={{ width: 300 }} />
          </Form.Item>
          <Button type="primary" style={{ marginLeft: 16 }}>查询</Button>
          <Button style={{ marginLeft: 16 }}>重置</Button>
        </Form>
        <Table
          rowSelection={{
            selectedRowKeys,
            onChange: setSelectedRowKeys,
          }}
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered
          style={{ background: '#fff' }}
        />
        {/* 详情弹窗 */}
        <Modal
          open={detailVisible}
          title="公共资源详情"
          footer={null}
          onCancel={() => setDetailVisible(false)}
          width={500}
        >
          {currentRecord && (
            <Descriptions column={1} bordered size="middle">
              <Descriptions.Item label="公共资源名称">{currentRecord.name}</Descriptions.Item>
              <Descriptions.Item label="容纳人数">{currentRecord.capacity}</Descriptions.Item>
              <Descriptions.Item label="类型">{currentRecord.type}</Descriptions.Item>
              <Descriptions.Item label="公共资源编号">{currentRecord.code}</Descriptions.Item>
              <Descriptions.Item label="建筑面积">{currentRecord.area} ㎡</Descriptions.Item>
              <Descriptions.Item label="出租单价">{currentRecord.price} 元/天</Descriptions.Item>
              <Descriptions.Item label="标签">{currentRecord.tag}</Descriptions.Item>
            </Descriptions>
          )}
        </Modal>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 24 }}>
          <span>共 100 条</span>
          <Pagination
            total={100}
            showSizeChanger
            showQuickJumper
            pageSizeOptions={[10, 20, 50]}
            defaultPageSize={10}
            style={{ marginRight: 16 }}
          />
          <span>
            到第 <Input style={{ width: 50, margin: '0 8px' }} size="small" /> 页
            <Button size="small">确定</Button>
          </span>
        </div>
      </div>
    </div>
  );
} 